<script setup>
import { ref } from 'vue';

const isProcessStarted = ref(false);
const isRenewalNoDispatch = ref(false);

const processSteps = ref([
    { name: '提交合同', isChecked: true, isDisabled: true },
    { name: '合同审核', isChecked: true, isDisabled: true },
    { name: '财务审核', isChecked: false, isDisabled: false },
    { name: '服务派工', isChecked: true, isDisabled: true },
    { name: '续签管理', isChecked: false, isDisabled: false },
]);

const submitContractItems = ref(['合同附件', '来源', '备用编号', '预收款', '默认支出']);
const submitContractRequiredItems = ref(['来源', '备用编号', '预收款']);

const contractAuditTableData = ref([
    { id: 1, scope: '百账汇（广州）科技有限公司', auditor: '张小姐、邓硕' },
]);

const isFinanceAuditStarted = ref(false);

const serviceDispatchTableData = ref([
    { id: 1, scope: '百账汇（广州）科技有限公司', auditor: '张小姐、邓硕' },
]);
</script>

<template>
    <div class="process-control">
        <h2>周期合同流转</h2>
        <div class="switch-container">
            <span>启动流程</span>
            <el-switch v-model="isProcessStarted" />
        </div>

        <div class="process-step" v-for="(step, index) in processSteps" :key="index">
            <div class="step-header">
                <el-checkbox v-model="step.isChecked" :disabled="step.isDisabled" />
                <span>{{ step.name }}</span>
            </div>
            <div v-if="step.name === '提交合同'" class="step-content">
                <p>可设置合同提交时需要校验的必填项</p>
                <el-checkbox-group v-model="submitContractRequiredItems">
                    <el-checkbox v-for="(item, i) in submitContractItems" :key="i" :label="item">
                        {{ item }}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
            <div v-else-if="step.name === '合同审核'" class="step-content">
                <p>指定人员拥有合同审核权限，审核后的合同才可以进入下一步，审核后的合同任何人不可编辑，按提交人的所属部门来确定审核人。</p>
                <el-table :data="contractAuditTableData" border style="width: 100%">
                    <el-table-column prop="id" label="#" width="50" />
                    <el-table-column prop="scope" label="审核权限范围" />
                    <el-table-column prop="auditor" label="审核人" />
                    <el-table-column label="操作" width="100">
                        <template #default>
                            <el-button type="text">操作</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-else-if="step.name === '财务审核'" class="step-content">
                <div class="switch-container">
                    <el-switch v-model="isFinanceAuditStarted" />
                    <span>开启后，可指定人员拥有收费审核权限，审核后的合同才可以进入下一步，审核后的合同任何人不可编辑，按提交人的所属部门来确定审核人。</span>
                </div>
            </div>
            <div v-else-if="step.name === '服务派工'" class="step-content">
                <el-checkbox v-model="isRenewalNoDispatch" />
                <span>续签合同不需要派工，可指定人员拥有派工权限，按客户所属部门来确定派工权限。</span>
                <el-table :data="serviceDispatchTableData" border style="width: 100%">
                    <el-table-column prop="id" label="#" width="50" />
                    <el-table-column prop="scope" label="审核权限范围" />
                    <el-table-column prop="auditor" label="审核人" />
                    <el-table-column label="操作" width="100">
                        <template #default>
                            <el-button type="text">操作</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-else-if="step.name === '续签管理'" class="step-content">
                <p>拥有合同编辑权限的角色可以进行续签。</p>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.process-control {
    background: white;
    padding: 20px;
    border-radius: 8px;
    min-height: 400px;

    .switch-container {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        span {
            margin-right: 10px;
        }
    }

    .process-step {
        margin-bottom: 30px;

        .step-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;

            span {
                margin-left: 10px;
                font-weight: bold;
            }
        }

        .step-content {
            margin-left: 25px;
        }
    }
}
</style>